<template>
	<div class="header">
		<div class="header-wrapper_t">
			<div class="header-wrapper">

				<div class="header_logo">
					<img width="64" height="64" :src="sellerList.avatar" />
				</div>

				<div class="header_content">
					<div class="title">
						<span class="brand"><img src="../../../resource/img/brand@2x.png"/></span>
						<span class="name">{{sellerList.name}}</span>
					</div>

					<div class="header-arrive">
						<span class="arrive_text">{{sellerList.description}}/{{sellerList.deliveryTime}}分钟送达</span>
					</div>
					<div class="support">
						<span class="support_icon"></span>
						<span class="support_text">{{sellerList.supports[0].description}}</span>
					</div>
				</div>

				<div class="support-count" @click="showDetail">
					<span class="count">{{sellerList.supports.length}}个</span>
				</div>

			</div>
			<div class="bulletin_wrapper" @click="showDetail">
				<span class="bulletin_icon">
		    		<img src="../../../resource/img/bulletin@2x.png" />
		    	</span>
				<span class="bulletin_text">{{sellerList.bulletin}}</span>
			</div>

		</div>

		<div class="header_background">
			<img :src="sellerList.avatar" width="100%" height="100%" />
		</div>

		<div v-show="detailShow" class="announcet_detail">
			<div class="delivery_content">
				<div class="shop_name">
					<h3>粥品香坊  (大运村)</h3>
				</div>

				<!--星星评分-->
				<div class="star_content">
					<star :score="sellerList.score" :size="48"></star>
				</div>

				<div class="favour_message">
					<div class="border_l"></div>
					<span class="message">优惠信息</span>
					<div class="border_r"></div>
				</div>
				<div class="favour_content">
					<ul class="favour_list">
						<li class="activity_list">
							<img src="../../../resource/img/decrease_2@3x.png" class="activity_icon" />
							<span>在线支付满28减5</span>
						</li>
						<li class="activity_list">
							<img src="../../../resource/img/discount_2@3x.png" class="activity_icon" />
							<span>单人精彩赛</span>
						</li>
						<li class="activity_list">
							<img src="../../../resource/img/discount_2@3x.png" class="activity_icon" />
							<span>清肺雪梨汤8折抢购</span>
						</li>
						<li class="activity_list">
							<img src="../../../resource/img/special_2@2x.png" class="activity_icon" />
							<span>特价饮品八折抢购</span>
						</li>
						<li class="activity_list">
							<img src="../../../resource/img/special_2@2x.png" class="activity_icon" />
							<span>单人特色套餐</span>
						</li>
					</ul>
				</div>

				<div class="favour_message">
					<div class="border_l"></div>
					<span class="message">商家广告</span>
					<div class="border_r"></div>
				</div>

				<div class="introduce_content">
					<p class="introduce_message">
						粥品香坊其烹饪粥料的秘方源于中国千年古法， 在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。 坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。 是2008年奥运会和2013年园博会指定餐饮服务商
					</p>
				</div>
			</div>
			<div class="hideDetail" @click="hideDetail">
				<i class="icon-close"></i>
			</div>
		</div>
	</div>
</template>

<script>
	import star from '../star/star.vue';
	export default {
		name: 'headers',
		data() {
			return {
				detailShow: false
			}
		},
		props: {
			sellerList: {
				type: Object
			}
		},
		methods: {
			showDetail: function() {
				this.detailShow = true;
			},
			hideDetail: function() {
				this.detailShow = false
				console.log(this.detailShow)
			}

		},
		computed:{
			
		},
		components: {
			star
		}

	}
</script>

<style scoped>
	.header {
		position: relative;
		color: #fff;
		background: rgba(7, 17, 27, 0.5)
	}
	
	.header-wrapper {
		position: relative;
		vertical-align: top;
		padding: 24px 16px 12px 24px;
	}
	
	.header_logo {
		display: inline-block;
	}
	
	.header_content {
		padding: 0 6px 8px 8px;
		vertical-align: top;
		display: inline-block;
	}
	
	.header_logo img {
		border-radius: 4px;
	}
	
	.title {
		display: inline-block;
	}
	
	.title .brand img {
		width: 30px;
		height: 18px;
		vertical-align: top;
	}
	
	.title .name {
		font-size: 16px;
		font-weight: bold;
		color: rgb(255.255, 255);
		vertical-align: top;
	}
	
	.arrive_text {
		font-size: 12px;
		color: rgb(255, 255, 255);
		font-weight: 200;
		line-height: 30px;
	}
	
	.support_icon {
		display: inline-block;
		width: 12px;
		height: 12px;
		margin-right: 4px;
		vertical-align: middle;
		background-size: 12px 12px;
		background-repeat: no-repeat;
		background-image: url(../../../resource/img/decrease_1@2x.png);
	}
	
	.support_text {
		vertical-align: top;
		font-size: 10px;
		font-weight: 200;
		color: rgb(255, 255, 255);
		line-height: 20px;
	}
	
	.support-count {
		border-radius: 15px;
		padding: 5px 12px;
		background: rgba(0, 0, 0, 0.2);
		position: absolute;
		right: 15px;
		bottom: 20px;
		line-height: 12px;
	}
	
	.support-count .count {
		font-size: 12px;
		color: rgb(255, 255, 255);
		font-weight: 200;
	}
	
	.bulletin_wrapper {
		display: flex;
		align-items: center;
		height: 28px;
		padding: 0px 8px;
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	.bulletin_icon {
		line-height: 14px;
		padding-right: 8px;
		padding-top: 3px;
	}
	
	.bulletin_icon img {
		width: 28px;
		height: 16px;
	}
	
	.bulletin_text {
		color: rgb(255, 255, 255);
		font-size: 10px;
		font-weight: 200;
		line-height: 28px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		letter-spacing: 1px;
	}
	/*背景*/
	
	.header_background {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -22;
		width: 100%;
		height: 100%;
		filter: blur(5px);
		z-index: -22;
	}
	/*公告详情*/
	
	.announcet_detail {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(7, 17, 27, 0.8);
		backdrop-filter: blur(10px);
	}
	
	.delivery_content {
		margin: 30px 36px 0;
	}
	
	.shop_name {
		text-align: center;
	}
	
	.shop_name h3 {
		font-size: 16px;
		font-weight: 700;
		color: rgb(225, 225, 225);
		line-height: 16px;
	}
	
	/*星星评分*/
	.star_content {
		display: flex;
		justify-content: center;
		margin: 16px 0 28px;
	}
	
	
	/*优惠信息*/
	.favour_message {
		margin-bottom: 24px;
		display: flex;
		line-height: 3px;
	}
	
	.border_l,
	.border_r {
		height: 1px;
		flex: 1;
		background: rgba(255, 255, 255, 0.6);
	}
	
	.message {
		width: 80px;
		text-align: center;
		font-weight: 700;
		color: rgb(225, 225, 225);
		font-size: 13px;
	}
	/*广告列表*/
	
	.favour_content {
		margin-bottom: 28px;
	}
	
	.activity_list {
		padding: 8px;
	}
	
	.activity_icon {
		width: 17px;
		height: 17px;
		vertical-align: middle;
	}
	
	.activity_list span {
		vertical-align: middle;
		font-size: 12px;
		font-weight: 200;
		color: #FFFFFF;
		line-height: 16px;
	}
	/*介绍*/
	
	.introduce_message {
		font-weight: 200;
		font-size: 12px;
		color: rgb(225, 225, 225);
		line-height: 20px;
	}
	/*关闭按钮*/
	
	.hideDetail {
		position: fixed;
		left: 50%;
		margin-left: -18px;
		bottom: 32px;
	}
	
	.icon-close {
		font-size: 32px;
		color: rgba(225, 225, 225, 0.2);
	}
</style>